

const list = document.querySelector('.list')
let sourceNode; // 当前拖拽的是哪个元素

let flip;
// 事件委托直接监听父元素
list.ondragstart = e => {
    // 不加延时的话会导致被拖动的元素在空中的时候也就编程虚线（moving样式设置的）的了
    setTimeout(() => {
        e.target.classList.add('moving');
    }, 0);
    // 在拖拽开始的时候把指示标改成移动
    e.dataTransfer.effectAllowed = 'move'; 
    sourceNode = e.target;

    flip = null;
    flip = new Flip(list.children)
    console.log("7777 ---- file: index.js:18 ---- flip---->", flip)
}

list.ondragover = (e) => {
    e.preventDefault();
    // flip.play();
}

// 监听拖拽结束时候在哪儿 
// 准备替换其 但是需要注意剔除两种状况1在自身的位置 2在父级里面
list.ondragenter = (e) => {
    // 阻止默认事件 使其不能拖入自身
    e.preventDefault();
    if (e.target == list || e.target == sourceNode) {
        return;
    }
    const children = [...list.children];
    // 被拖拽元素的下标
    const sourceIndex = children.indexOf(sourceNode);
    // 进入的元素下标
    const targetIndex = children.indexOf(e.target);

    // 向下拖动 将当前元素加入到指定元素下一个之前 
    if (sourceIndex < targetIndex) {
        list.insertBefore(sourceNode, e.target.nextElementSibling)
    }
    // 向上拖动 当前元素加入到指定元素之前就行
    else {
        list.insertBefore(sourceNode, e.target)
    }
    flip.play();
} 

list.ondragend = (e) => {
    e.target.classList.remove('moving');
}